<!--
=======================================弹框组件=================================================================
  父组件使用:
    1. 定义dialogShow变量, 默认false;
    2. 定义returnData的回调函数, res.show赋值给dialogShow, res.data就是点击确定按钮后返回的数据.
       <Dialog v-if="dialogShow" :title="'DEV弹框'" :data="{}" @returnData="res => {this.dialogShow = res.show; let data = res.data}" />
    工作: 输入数据, 返回处理后的数据
-->
<template>
  <div>
    <el-dialog width="60%" :title="title" :visible.sync="show" @close="cancel()" >
      <div class="dialog-content">
        <el-row>
                    <el-col class="col-style" :span="12">
            <span class="content-title">字典名称</span>
            <span class="content-text">{{ data.dictName }}</span>
          </el-col>
          <el-col class="col-style" :span="12">
            <span class="content-title">字典描述</span>
            <span class="content-text">{{ data.description }}</span>
          </el-col>
          <el-col class="col-style" :span="12">
            <span class="content-title">状态(1开启,0关闭)</span>
            <span class="content-text">{{ data.status }}</span>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel()">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitData()">确 定</el-button>
        <div style="font-size: 12px;color: #737272;"><span style="color: #ea9c2bfa;">提示: </span>点击弹框外任意处, 可直接关闭弹框~</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "DetailsDialog",
  props: {
    title: String | Number,
    data: Object | String | Array | Number | Boolean | Blob,
    dialogStyle: Object
  },
  data() {
    return {
      show: true
    }
  },
  mounted() {

  },
  methods: {
    submitData: function () {
      this.returnData({show: false, data: this.data});
    },
    cancel: function () {
      this.returnData({show: false, data: null})
    },
    returnData: function (params) {
      this.$emit('returnData', params);
    }
  }

}
</script>

<style scoped>
/* 弹框样式 */
.dialog-style {}

/* 内容盒子 */
.dialog-content {
  overflow: auto;
}

/* col样式 */
.col-style {
  line-height: 75px;
}

/* 字段标题 */
.content-title {
  margin-right: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #03a9f4;
}

/* 字段值 */
.content-text {
  font-size: 14px;
  color: #807b7b;
}

/* 样式穿透 */
/deep/ .el-dialog {
  border-radius: 12px;
  background: #FFFFFFF4;
  box-shadow: 6px 5px 7px 2px #433f3fd6;
}

/* 移动端自适应 */
@media screen and (max-width: 1056px) {
  /deep/ .el-dialog {
    width: 100% !important;
    border-radius: 30px 30px 0 0;
    background: #FFFFFFF4;
    box-shadow: 6px 5px 7px 2px #433f3fd6;
    position: fixed;
    bottom: 0px;
  }
}
</style>
